<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="jsp_header.jsp" %>  
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
	div#slideItems img {
		float:left;
		margin-right:13px;}
	
	ul#slideAllCount li.slide{
		float:right;
		cursor:pointer;
		width:25px;
		height:18px;
		display:block;	}
	ul#slideAllCount li.slide span{
		margin-top: 4px;
		display:block;
		width:12px;
		height:12px;
		background: #999;
		text-indent:9999px;
		border-radius:6px;}
	ul#slideAllCount li.slide span:hover{
		background: #222;}
	ul#slideAllCount li.slide.selectedTab span{
		background: #99CCCC;}
</style>
	<head>
	<meta charset="UTF-8">
	<title>Gilly의 홈쇼핑</title>
	<link type="text/css" rel="stylesheet" href="/resources/common/common.css"> 
	</head>
	
	<body>
	    
	<jsp:include page="main_header.jsp"></jsp:include>
		
	<!-- 사이드바 -->

	<jsp:include page="main_left.jsp" ></jsp:include>
	<script type="text/javascript" src="/resources/js/jquery-1.10.2.js"></script>
	
	<!-- Content, 중앙 슬라이드바 -->
	<div id=container><!-- location --><!-- location -->
		<div class="set_visual02 mg0">
			
			<div id="slideAll" class="box_rolling d_box_rolling">
				<ul id="slideItems" style="width:100%; left:0px; ">
					<li style="position:absolute;  top:0px; width:100%; opacity:1; z-index:2;">
						<a href="#">
							<img src="/resources/image/main1.jpg">
						</a>
					</li>
					<li style="position:absolute;  top:0px; width:100%; opacity:1; z-index:2;">
						<a href="#">
							<img src="/resources/image/main2.jpg">
						</a>
					</li><li style="position:absolute;  top:0px; width:100%; opacity:1; z-index:2;">
						<a href="#">
							<img src="/resources/image/main3.jpg">
						</a>
					</li>
					<li style="position:absolute; top:0px; left:0px; display:none; width:100%;opacity:1; z-index:2;">
						<a href="#">
							<img src="/resources/image/main4.jpg">
						</a>
					</li>
					
					<li style="position:absolute; top:0px; left:0px; display:none; width:100%; opacity:1; z-index:2;">
						<a href="#">
							<img src="/resources/image/main5.jpg">
						</a>
					</li>
				</ul>	
				
				<script type="text/javascript">
			$(function(){

				$('#slideItems li').hide();

				var current = -1;
				var prev = null;
				var interval = null;
				var FADE_SPEED = 500;
				var DELAY_SPEED = 5000;
				var slides = $('#slideItems li');
				var html = '<ul id="slideAllCount" style="position:absolute;right:520px;top:330px; z-index:99; ">'

				for (var i = slides.length - 1; i >= 0 ; i--){
					html += '<li id="slide'+ i+'" class="slide"><span>'+(i+1)+'</span></li>' ;
				}
				html += '</ul>';

				$('#slideAll').after(html);
				for (var i = slides.length - 1; i >= 0 ; i--){
					$('#slide'+i).bind("click",{index:i},function(event){
						current = event.data.index;	
						gotoSlide(current);
					});
				};
				autoSlide();

				function autoSlide (){
					if (current >= slides.length -1){
						current = 0;
					}else{
						current++
					}
					gotoSlide(current);	
				}

				function gotoSlide(current){
					if (current != prev){
						$('#slide'+current).addClass('selectedTab');
						$('#slide'+prev).removeClass('selectedTab');
						$(slides[prev]).stop().hide();
						$(slides[current]).stop().slideDown(FADE_SPEED);
						prev = current;
						if (interval != null){
							clearInterval(interval);
						}
						interval = setInterval(autoSlide, DELAY_SPEED);
					}
				}
			});
		</script>
		</div>
		
		<div class="list_banner">
			<ul>
				<li>
					<a href="#">
						<img src="/resources/image/item1.png">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="/resources/image/right2.jpg">
					</a>
				</li>
			</ul>
		</div>
	</div>
	
	<div class="product_list">
		<div id="list_title">
			<ul>
	    		<li><STRONG><h3>New & Hot Item</h3></STRONG></li>
	    	</ul>
	    </div>
    </div>
	    <div class="new_item_list">
	    	<ul class="item_list">
		    	<c:forEach items="${ItemList}" var="item">
		    	  <li class="item">
				  <c:choose>	
					<c:when test="${image != '' }">
						<div><a href="/product/ProductDetail?no=${item.NO}">
						<img width="215" height="255" src="/resources/image/${item.mainImage}"></a></div>
					</c:when>
					<c:when test="${image == '' }">
						<div><a href="/product/ProductDetail?no=${item.NO}">
						<img width="215" height="255" src="/resources/image/noimage.gif"></a></div>
					</c:when>
				  </c:choose>
					<div align="center">${item.NAME}</div>
					<div align="center">				
						<c:if test="${item.ICON_NEW!=null}"><img src="/resources/image/i_new.gif"></c:if>
						<c:if test="${item.ICON_HIT!=null}"><img src="/resources/image/i_hit.gif"></c:if>
						<c:if test="${item.ICON_SALE!=null}"><img src="/resources/image/i_sale.gif"></c:if>
					</div>
					<div align="center"><fmt:formatNumber value="${item.PRICE}" type="currency"/></div>
		    	  </li> 
		    	</c:forEach>  
	    	  
	    	</ul>
	     </div>  		
	   	</div>	
	   	    <div><jsp:include page="main_bottom.jsp"></jsp:include></div>   
	</body>
	</html>